<template>
	<div class="flex align-center justify-center" v-if="fileList.length > 0">
		<el-image :src="fileShow.url" :preview-src-list="fileYulanList" :z-index="99999" :fit="fit" :style="style"
			v-if="fileShow.type == 'img'" :preview-teleported="true"></el-image>
		<el-icon v-else-if="fileShow.type == 'txt'" :size="30" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<el-icon v-else-if="fileShow.type == 'excel'" :size="30" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<el-icon v-else-if="fileShow.type == 'word'" :size="30" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<el-icon v-else-if="fileShow.type == 'pdf'" :size="30" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<el-icon v-else-if="fileShow.type == 'ppt'" :size="30" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<el-icon v-else-if="fileShow.type == 'video'" :size="30" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<el-icon v-else-if="fileShow.type == 'radio'" @click="xiazaiClick(fileShow.url)">
			<Document />
		</el-icon>
		<template v-if="fileList.length > 1">
			共{{fileList.length}}张
		</template>
	</div>
</template>

<script>
	export default {
		name: "gz-table-img",
		props: {
			urls: {
				type: Object
			},
			fit: {
				type: String,
				default: "fill"
			},
			style: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				fileList: [],
				fileYulanList: [],
				fileShow: {
					type: "",
					url: ""
				}
			}
		},
		mounted() {
			this.initData(this.urls)
		},
		methods: {
			initData(urls) {
				if (!urls) {
					return
				}
				let urlList = []
				if (Array.isArray(urls)) {
					urlList = urls
				} else {
					if (urls.indexOf(",") == -1) {
						urlList = [urls]
					} else {
						urlList = urls.split(",")
					}
				}
				let fileList = []
				urlList.forEach(item => {
					let type = this.$common.getFileType(item)
					fileList.push({
						url: item,
						type: type,
					})
				})
				this.fileYulanList = fileList.map(item => item.url)
				this.fileList = fileList
				this.fileShow = {
					type: fileList[0].type,
					url: fileList[0].url
				}
			},
			xiazaiClick(url){
				window.open(url)
			}
		}
	}
</script>

<style scoped lang="scss">
.el-icon {
	cursor: pointer;
}
</style>